---
title: ディレクトリ構成
description: Astroを使ったプロジェクトのディレクトリ構成方法を学びます。
i18nReady: true
---
import { FileTree } from '@astrojs/starlight/components';

CLIウィザードの`create astro`で生成した新しいAstroプロジェクトには、いくつかのファイルとフォルダが含まれています。その他は自分で作成し、Astroの既存のファイル構成に追加します。

ここでは、Astroプロジェクトがどのように構成されているか、また、新しいプロジェクトに含まれるいくつかのファイルについて説明します。

## ディレクトリとファイル

Astroは、プロジェクトで独自のディレクトリ構成を利用します。すべてのAstroプロジェクトのルートには、以下のディレクトリとファイルを含む必要があります。

- `src/*` - プロジェクトソースコード（コンポーネント、ページ、スタイルなど）
- `public/*` - コード以外の処理不要のアセット（フォント、アイコンなど）
- `package.json` - プロジェクトマニフェスト
- `astro.config.mjs` - Astroの設定ファイル（推奨）
- `tsconfig.json` - TypeScriptの設定ファイル（推奨）

### ディレクトリツリーの例

よくあるAstroプロジェクトのディレクトリは次のような形です。

<FileTree>
- public/
  - robots.txt
  - favicon.svg
  - social-image.png
- src/
  - components/
    - Header.astro
    - Button.jsx
  - layouts/
    - PostLayout.astro
  - pages/
    - posts/
      - post1.md
      - post2.md
      - post3.md
    - index.astro
  - styles/
    - global.css
- astro.config.mjs
- package.json
- tsconfig.json
</FileTree>

### `src/`

`src/`ディレクトリには、プロジェクトのソースコードのほとんどが格納されます。これには以下が含まれます。

- [ページ](/ja/basics/astro-pages/)
- [レイアウト](/ja/basics/layouts/)
- [Astroコンポーネント](/ja/basics/astro-components/)
- [UIフレームワークコンポーネント（Reactなど）](/ja/guides/framework-components/)
- [スタイル（CSS、Sass）](/ja/guides/styling/)
- [Markdown](/ja/guides/markdown-content/)

Astroは、`src/`内にあるファイルを処理し、最適化し、バンドルして、ブラウザに表示される最終的なウェブサイトを作成します。 静的な`public/`ディレクトリとは違い、`src/`内にあるファイルはAstroによってビルドされ、処理されます。

一部のファイル（Astroコンポーネントなど）は、そのままブラウザに送信されず、静的なHTMLに変換されます。その他のファイル（CSSなど）はブラウザに送信されますが、パフォーマンスのために最適化されたり、他のCSSファイルとバンドルされたりする場合があります。

:::tip
このガイドは、Astroコミュニティでよく使われている慣習について説明していますが、Astroが予約しているディレクトリは`src/pages/`と`src/content/`だけです。その他のディレクトリは、自分にとって最適な方法で、自由に名前を変更したり再編成しても構いません。
:::

### `src/components`

**コンポーネント**は、HTMLページで再利用可能なコードの単位です。[Astroコンポーネント](/ja/basics/astro-components/)や、ReactやVueなどの[UIフレームワークコンポーネント](/ja/guides/framework-components/)がこれにあたります。 プロジェクトのすべてのコンポーネントをこのフォルダにまとめて整理するのが一般的です。

これはAstroプロジェクトでは一般的な慣習ですが、必須ではありません。好きなようにコンポーネントを整理してください！

### `src/content`

`src/content/`ディレクトリは、[コンテンツコレクション](/ja/guides/content-collections/)と、オプションのコレクション設定ファイルを格納するために予約されています。このフォルダには他のファイルを置くことはできません。

### `src/layouts`

[レイアウト](/ja/basics/layouts/)は、複数の[ページ](/ja/basics/astro-pages/)で共有されるUI構造を定義するためのAstroコンポーネントです。

`src/components`と同様に、このディレクトリは一般的な慣習ですが、必須ではありません。

### `src/pages`

[ページ](/ja/basics/astro-pages/)は、サイト上に新しいページを作成するために使用される、特別な種類のコンポーネントです。ページは、Astroコンポーネントまたは、サイトのコンテンツのページを表すMarkdownファイルになります。

:::caution
`src/pages`は、Astroプロジェクトにおいて**必須**のサブディレクトリです。これがないと、あなたのサイトにはページもルーティングもありません！
:::

### `src/styles`

CSSやSassのファイルを`src/styles`ディレクトリに格納するのは一般的な慣習ですが、必須ではありません。スタイルが`src/`ディレクトリのどこかにあり、正しくインポートされていれば、Astroはそれらを処理し最適化します。

### `public/`

`public/`ディレクトリは、Astroのビルドプロセスで処理する必要のないプロジェクトのファイルやアセットを格納するためのものです。このフォルダ内のファイルはそのままビルドフォルダにコピーされ、サイトがビルドされます。

この動作により、`public/`は画像やフォントなどの一般的なアセット、あるいは`robots.txt`や`manifest.webmanifest`などの特殊なファイルを置くのに最適な場所となります。

CSSやJavaScriptを`public/`ディレクトリに置くことはできますが、これらのファイルは最終的なビルドではバンドルされず、最適化されないことに注意してください。

:::tip
原則として、自分で書いたCSSやJavaScriptは`src/`ディレクトリに置いてください。
:::

### `package.json`

これは、JavaScriptのパッケージマネージャーが依存関係を管理するために使用するファイルです。また、Astroを実行するためによく使われるスクリプトを定義します（たとえば`npm start`や`npm run build`など）。

`package.json`には、`dependencies`と`devDependencies`という[2種類の依存関係](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file)を指定できます。多くの場合、同じように動作します。Astroはビルド時に全ての依存関係を必要とし、パッケージマネージャーはどちらともインストールを行います。まずは`dependencies`にすべての依存関係を含め、特に必要な場合のみ`devDependencies`を利用することをおすすめします。

あなたのプロジェクトに新しい`package.json`ファイルを作成する方法については、[手動セットアップ](/ja/install/manual/)の説明を参照してください。

### `astro.config.mjs`

このファイルはすべてのスターターテンプレートで生成され、Astroプロジェクトの設定オプションが含まれています。ここでは、使用するインテグレーション、ビルドオプション、サーバーオプションなどを指定できます。

設定の詳細については、[Astroの設定ガイド](/ja/reference/configuration-reference/)を参照してください。

### `tsconfig.json`

このファイルはすべてのスターターテンプレートで生成され、TypeScriptの設定オプションが含まれています。（npmパッケージのインポートなどの）いくつかの機能は`tsconfig.json`ファイルがないと完全にはサポートされません。

設定の詳細については、[TypeScriptガイド](/ja/guides/typescript/)を参照してください。
